<template>
	<!-- // 点击的时候必须是登录 图片上传本地选择界面 -->
	<view class="left-box">
		<!-- margin-bottom: 46rpx -->
		<view class="" style=" margin: 0rpx 18rpx; height: 350rpx;;" @click="disableBolen && storgImg()">
			<image src="../static/add1@2x.png" mode=""></image>
		</view>
		<scroll-view scroll-y="true" style="height: 658rpx;">
			<view class="flex" style="flex-wrap: wrap;">
				<block v-for="(item,index) in wxImg" :key="index">
					<view class="left-img" @click="disableBolen && previe(index)" style="position: relative;">
						<image :src="item"></image>
						<image src="../static/canels@2x.png" style="position: absolute; width:50rpx;height: 50rpx ;  right: -12rpx;
		    top: -16rpx;" @click.stop="disableBolen && deleleft(index)">
						</image>
					</view>
				</block>
			</view>
		</scroll-view>
		<x-print-prompt :long="long" success="true" @submitImg="disableBolen && submitImg()"></x-print-prompt>


	</view>
</template>
<script>
	import {
		login
	} from "@/utils/applet/login.js"
	import {
		choosImgend,
		choosImg,
	} from '@/api/applet/chooseImgPrint.js'
	import {
		choss,
		easyImg
	} from '@/utils/applet/chooseImgPrint.js'

	export default {
		data() {
			return {
				titlesshow: '',
				titleItem: '',
				showPay: false, //显示支付完毕的弹窗
				wxImg: [], //图片数组
				long: '', //图片的长度
				disableBolen: true, //控制是否确定提交之后  是否可以点击
				orderId: '', //订单号
				specId: '', //规格id
				ifIndex: 0, //if判断是否全部for循环完毕+
				openid: '', //uniconid
				messageListchooseImg: {
					path: [],
					pages: '',
					orderId: '', //订单号
				}
			}
		},
		onLoad(options) {
			// if (options.q) {
			// 	var scan_url = decodeURIComponent(options.q); //获取的完整的二维码url路径 
			var scan_url = "https://api.cloudmis.cn?id='6'&orderId=6D77D1A0537F48A59F5D56F61A023B9F&specid=0"
			// var reg =
			// 	/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i; //正则匹配最后的动态参数
			var reg =
				/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
			var arr = scan_url.match(reg);
			this.orderId = arr[6]
			// this.urlq = options.q
			this.specId = arr[8]
			this.messageListchooseImg.orderId = arr[6]
			// }

		},
		// 点击的时候必须是登录
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},
		// storgImg 上传图片   previe预览图片  deleleft删除图片     @submitImg提交打印
		methods: {
			spu() {
				var text = [{
					"field": 'SPUId',
					"value": 1016,
				}];
				this.$store.commit("spuid", text);
			},
			// 点击添加本地图片
			storgImg() {
				if (this.disableBolen) {
					if (this.openid == '') {
						login().then(res => {
							this.chosss();
							this.spu();
						})
					} else {
						this.chosss();
						this.spu();
					}
				}
			},
			chosss() {
				if (this.disableBolen) {
					if (this.wxImg.length == 6) {
						uni.showToast({
							title: '只能添加6张图',
							icon: 'none',
							duration: 1500
						})
					} else {
						choss(6).then(res => {
							console.log(res, 'res1')
							this.long = res.length;
							for (let i = 0; i < res.length; i++) {
								if (this.wxImg.length < 6) {
									this.wxImg.push(res[i])
								}
							}
							this.messageListchooseImg.path = this.wxImg;
							console.log(this.messageListchooseImg, 'this.messageListchooseImg')
							console.log(this.messageListchooseImg.length, 'this.length')
							this.imgdisable = true; //选择照片的防抖
							this.long = this.wxImg.length;
						}).catch(error => {
							this.imgdisable = true; //选择照片的防抖
						})
					}
				}
			},
			// 提交打印 跳转到下一个界面
			submitImg() {
				uni.showLoading({
					title: '请稍后...'
				})
				this.disableBolen = false;
				if (!this.disableBolen && this.wxImg.length != 0) {
					for (let i = 0; i < this.wxImg.length; i++) {
						choosImg({
							postdata: [{
								fileId: 'orderId',
								value: this.orderId
							}, {
								fileId: 'unionId',
								value: this.openid
							}, {
								fileId: 'specId',
								value: '0' //this.specId
							}, {
								fileId: 'index',
								value: '1' //String(i + 1)
							}, {
								fileId: 'count',
								value: '2' //String(tempFilePathswxImg.length)
							}],
							filePath: this.wxImg[i],
						}).then(res => {
							console.log(res, '获取页数')
							if (res.success == true) {
								console.log('true')
								this.ifIndex++;
								if (this.ifIndex == this.wxImg.length) {
									console.log('ewdfewd')
									var text1 = [{
										fileId: 'orderId',
										value: this.orderId
									}, {
										fileId: 'unionId',
										value: this.openid
									}];
									choosImgend(text1).then(res => {
										this.messageListchooseImg.pages = res.data.pageCount;
										uni.hideLoading();
										console.log(res, '第二个接口')
										console.log(this.messageListchooseImg, 'this.choosImgend')
										uni.redirectTo({
											url: './submitChooseImgPrintApp?messageList=' + JSON
												.stringify(this.messageListchooseImg)
										})
									}).catch(error => {
										console.log(error, 'error')
									})
								}
							}
						})
					}

				}

				console.log('提交打印')
			},
			// 删除图片 还未提交的时候可以删除 提交点击后发送到服务器过程不可以删除
			deleleft(index) {
				uni.showModal({
					title: '删除提示',
					content: '请谨慎删除',
					success: (res) => {
						if (res.confirm) {
							console.log(index)
							this.wxImg.splice(index, 1)
							this.long -= 1;
							uni.showToast({
								icon: 'none',
								title: '删除成功'
							})
						} else if (res.cancel) {
							uni.showToast({
								icon: 'none',
								title: '取消删除'
							})
						}
					}
				})

			},
			previe(index) {
				// 预览图片 还未提交的时候可以删除 提交点击后发送到服务器过程不可以删除
				easyImg(this.wxImg, index)
			},
		}
	}
</script>

<style>
	.left-box {
		/* //30rpx */
		padding: 10rpx 10rpx 0rpx 10rpx;
	}

	.left-img {
		/* width: 219rpx;
		height: 237rpx; */
		width: 219rpx;
		height: 300rpx;
		/* border: 0.1px solid red; */
		margin: 22rpx 13rpx 10rpx 13rpx;
		padding: 20rpx 17rpx 0rpx 17rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		/* box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5); */
		box-shadow: 0px 0px 8px 0px rgba(145, 122, 128, 0.5);
		border-radius: 5px;
	}

	.left-sub {
		padding: 0rpx;
		/* box-shadow: 0px 0px 8px 0px rgba(145, 122, 128, 0.5); */
	}
</style>
